<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XHR Example</title>
    <style>
        #message {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="message"></div>
<button id="getDataBtn">Get Data from API</button>

<script>
    document.getElementById('getDataBtn').addEventListener('click', function() {
        console.log("点击了")
        const xhr = new XMLHttpRequest();
        xhr.open("GET", 'https://api-ai.qfxuexi.com/ai2/ai?content=%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B%E9%9B%B7%E5%86%9B&user=ZFL&type=0');
        // 设置响应类型为 text/event-stream
        xhr.setRequestHeader("Content-Type", "text/event-stream");
        // 监听 readyStateChange 事件
        xhr.onreadystatechange = () => {
            // 如果 readyState 是 3，表示正在接收数据
            if (xhr.readyState === 3) {
                // 将数据添加到文本框中
                console.log('xhr.responseText :>> ', xhr.responseText);
                reply("images/touxiang.png", xhr.responseText, randomStr)
                var height = $("#message").height();
                $("html").scrollTop(height)
            }
        };
        // 发送请求
        xhr.send();
    });
</script>
</body>
</html>
